import React, { Component } from 'react'
import './Item.css'
export default class Item extends Component {
  // 点击复选框的事件处理函数
  updateHandle = () => {
    // 要获取修改的数据的id
    const id = this.props.todo.id
    // 将id传递给App
    this.props.updateTodo(id)
  }
  // 点击每一条数据的删除按钮的事件处理函数
  delHandle = () => {
    // 要获取删除的数据的id
    const id = this.props.todo.id
    // 将id传递给App
    this.props.delTodo(id)
  }
  render() {
    // 从props上解构todo
    const {
      // todo是一个对象,解构todo就可以这样写
      todo: { id, todoName, isDone },
    } = this.props
    return (
      <li>
        <label>
          {/* 当一个表单元素的值被控制了,则用户操作没有反应. 以及react警告要写一个onChange事件 */}
          <input
            type="checkbox"
            checked={isDone}
            onChange={this.updateHandle}
          />
          <span className={isDone ? 'done' : ''}>{todoName}</span>
        </label>
        <button className="btn btn-danger" onClick={this.delHandle}>
          删除
        </button>
      </li>
    )
  }
}
